<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主题新增')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body>
<div class="container">
    <th:block th:include="include :: navigate('主题新增','关 闭','index')"/>

    <form  id="subjectForm">
        <div class="form-group">
            <label class="control-label is-required">标题名：</label>
            <input type="text" class="form-control" id="title"  name="title" maxlength="50" required
                   placeholder="请输入标题名">
        </div>
        <div class="form-group">
            <label for="subheading" class="control-label is-required">副标题：</label>
            <input type="text" class="form-control" id="subheading" name="subheading" maxlength="100" required
                   placeholder="请输入副标题">
        </div>
        <div class="form-group">
            <label for="resourcePath" class="control-label is-required">资源上传：</label>
            <input type="hidden" id="resourcePath" name="resourcePath">
            <input id="file" name="file" type="file" class="file-loading">
        </div>

        <div class="form-group">
            <label for="content">内容：</label>
            <textarea class="form-control" id="content" name="content" placeholder="请输入内容"></textarea>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="submit" class="btn btn-sm btn-primary" id="submit-form"><i class="fa fa-check"></i>保 存
                </button>&nbsp;
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<script>
    var addSubject = "/backend/subject/addSubject"
    $(function () {
        $("#content").summernote({
            height: 300,
            lang: 'zh-CN',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ol', 'ul', 'paragraph', 'height']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
            ]
        })


        var icon = "<i class='fa fa-times-circle'></i>";
        $("#subjectForm").validate({
            rules: {
                title: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                },
                subheading: {
                    required: true,
                    minlength: 2,
                    maxlength: 50
                }
            },
            messages: {
                title: {
                    required: icon + "请输入标题",
                    minlength: icon + "标题不能小于2个字符",
                    maxlength: icon + "标题不能大于50个字符"
                },
                subheading: {
                    required: icon + "请输入副标题",
                    minlength: icon + "副标题不能小于2个字符",
                    maxlength: icon + "副标题不能大于50个字符"
                }
            },
            submitHandler: function (form) {
                var data = serializeObject($("#subjectForm"))
                var regexNotNull = /^.+$/;

                if (!regexNotNull.test (data.resourcePath)) {
                    cocoMessage.warning("资源未上传。",2000)
                    return false
                }
                postAjax(addSubject,JSON.stringify(data),function (response) {
                    if (response.code == 0){
                        resertFrom()
                        cocoMessage.success(response.msg+"！")
                    }
                })
                return false
            }
        })
    })

    $("#file").fileinput({
        uploadUrl: "/backend/resource/upload",
        ajaxSettings: {
            headers: {
                "token": window.token
            }
        },
        allowedFileExtensions: ["jpg", "png", "jpeg", "gif", "mp4", "avi", "rmvb"],
        maxFileCount: 1,
        /* 配置为自动替换已上传的文件，适用于需要单一资源的情况 */
        autoReplace: true,
    }).on('fileuploaded', function (event, data) {
        $("#resourcePath").val(data.response.msg)
    })

    /**
     * 表单重置
     */
    function resertFrom() {
        $("#file").fileinput('clear')
        $("#title").val("")
        $("#subheading").val("")
        $("#content").summernote('code', '');
        $("#resourcePath").val("")
    }

</script>
</body>
</html>
